<template>
  <div class="swiper-wrapper-container">
    <!-- Swiper 容器 -->
    <div ref="swiperContainer" class="swiper-container mySwiper">
      <div class="swiper-wrapper">
        <div
            v-for="(slide, index) in slides"
            :key="index"
            class="swiper-slide"
            :style="{ backgroundImage: 'url(' + slideImages[index] + ')' }"
        >
          {{ slide }}
        </div>
      </div>

      <!-- 分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';

export default {
  name: 'SwiperComponent',
  data() {
    return {
      // 每个轮播项的文字内容
      slides: [
        '', '', '', '',
        '', ''
      ],
      // 每个轮播项的图片路径
      slideImages: [
        'src/assets/images/banner/banner1.jpg',
        'src/assets/images/banner/banner2.jpg',
        'src/assets/images/banner/banner3.jpg',
        'src/assets/images/banner/banner4.jpg',
        'src/assets/images/banner/banner5.jpg',
        'src/assets/images/banner/banner6.jpg'
      ]
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      // 确保 DOM 已经渲染完成
      this.$nextTick(() => {
        const container = this.$refs.swiperContainer;
        if (container) {
          new Swiper(container, {
            loop: true,
            grabCursor: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            }
          });
        } else {
          console.warn('Swiper container not found.');
        }
      });
    }
  }
};
</script>

<style scoped>
.swiper-wrapper-container {
  position: relative;
  width: 100%;
}

.mySwiper {
  width: 100%;
  height: 750px;
  position: relative;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 可选：添加遮罩层让文字更清晰 */
.swiper-slide::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.swiper-slide > * {
  position: relative;
  z-index: 1;
}

.swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: white;
  font-size: 24px;
  cursor: pointer;
}
.swiper-button-prev {
  left: 20px;
}
.swiper-button-next {
  right: 20px;
}
</style>